@extends('frontend::login.common')
@section('content')
    <div class="mui-taber">
        <b style="font-size: 18px;">找回密码</b>

    </div>

    <form action="{{url()->current()}}" class="form2 active" id="forget-form" method="post">
        {{csrf_field()}}
        <div class="mui-input-group">
            <i class="fa fa-phone"></i>
            <input type="text" name="phone" placeholder="填写手机号"  />
        </div>
        <div class="mui-input-group">
            <i class="fa fa-envelope" style="font-size: 13px;"></i>
            <input type="text" name="phone_code" placeholder="手机验证码"  />
            <button type="button" id="send_code" style="top: 7px;width: 60px;height: 25px;line-height: 15px;right: 10px;background: #f0f6fd;color: #225181;font-size: 12px;border-radius: 16px;">验证码</button>
        </div>
        <div class="mui-input-group">
            <i class="fa fa-lock"></i>
            <input type="password" name="pwd" placeholder="请输入新密码"  />
        </div>
        <div class="mui-input-group">
            <i class="fa fa-lock"></i>
            <input type="password" name="re_pwd" placeholder="再次确认密码"  />
        </div>

        <button class="mui-btns btns2" type="button" style="margin-top: 30px;background: #5a92fd;color: #fff;height: 40px;width: 95%;">确认找回</button>

        <div class="mui-text-right mui-input-group" style=""><a href="{{route('f_Login_login')}}">返回登录</a></div>

    </form>
@endsection
@push('scripts')
    <script>
        var code = '';
        var input = $('input');
        var phone =''
        //true就是可以发送
        var onoff = true;
        //发送验证码
        $('#send_code')[0].addEventListener('tap',function(){

            //false就不能发送
            if(!onoff){
                return;
            }
            onoff = false;
            //点击玩按钮干什么?
            //发验证码?
            // 1-给谁发? 手机号码
            phone = $('input[name="phone"]').val();
            if(phone == ''){
                mui.toast('手机号码不能为空');
                onoff = true;
                return;
            }
            if(phone.length != 11){
                mui.toast('手机号码位数不正确');
                onoff = true;
                return;
            }


            // 2-验证码是什么? cast 可以生成一个随机码
            code =getCode(phone);

            // 3-发送 在这里我来使用一个定时器来模拟一下发送的时间, 大家可以使用第三方的短信平台，比如阿里大于，我们在学员专区内的功能模块开发里有2节视频，大家可以看
            var num = 60;
            var timer = setInterval(function(){
                num--;
                if(num == 0){
                    send_code.innerHTML = '发送验证码';
                    //定时器停了
                    clearInterval(timer);
                    onoff = true;
                }else{
                    send_code.innerHTML = num + 'S';
                }

            },1000); // 1000 毫秒==1秒


        });

        function getCode(phone){
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: 'post',
                url: "{{route('f_Login_sendPhoneCode',['type'=>'code'])}}",
                dataType: 'json',
                data: {phone:phone}
            }).done(function (response) {
                mui.toast(response.msg);
            }).fail(function (XMLHttpRequest) {
                if (XMLHttpRequest.status == 422) {
                    var errors = XMLHttpRequest.responseJSON.errors;
                    if(typeof errors == 'object') {
                        for (var index in errors) { // 不推荐这样
                            mui.toast(errors[index][0]);
                            break;
                        }
                    }else{
                        mui.toast(XMLHttpRequest.responseJSON.msg);
                    }
                }else{
                    mui.toast('网络异常,请检查连接');
                }

            }).always(function () {

            });
        }

        $('.btns2')[0].addEventListener('click',function(){
            var load =  layer.open({type: 2});
            $.ajax({
                type: 'post',
                url: $('#forget-form').attr('action'),
                dataType: 'json',
                data: $('#forget-form').serialize()
            }).done(function (response) {
                if(response.status){
                    mui.toast(response.msg);
                    setTimeout(function () {
                        location.href = response.url;
                    }, 2000);
                }else{
                    mui.toast(response.msg);
                }
            }).fail(function (XMLHttpRequest) {
                if (XMLHttpRequest.status == 422) {
                    var errors = XMLHttpRequest.responseJSON.errors;
                    if(typeof errors == 'object') {
                        for (var index in errors) { // 不推荐这样
                            mui.toast(errors[index][0]);
                            break;
                        }
                    }else{
                        mui.toast(XMLHttpRequest.responseJSON.msg);

                    }
                }else{
                    mui.toast('网络异常,请检查连接');
                }

            }).always(function () {
                layer.close(load);
            });

        })
    </script>
@endpush